<script lang="ts" setup>
import { closeDialog, dialogStore } from './index'
import { transformI18n } from '@/plugins/i18n'
import type { DialogOptions } from '@/components/SpDialog/type'
import { isFunction } from 'lodash'

const onOk = (options: DialogOptions, index: number) => {
  const done = () => closeDialog(options, index)
  if (options?.beforeSure && isFunction(options?.beforeSure)) {
    options.beforeSure(done, { options, index })
  } else {
    done()
  }
}
</script>
<template>
  <a-modal
    v-for="(options, index) in dialogStore"
    v-model:open="options.open"
    :cancel-text="transformI18n('dialog.cancelText ')"
    :ok-text="transformI18n('dialog.onText')"
    :title="transformI18n('dialog.title')"
    v-bind="options"
    @ok="onOk(options as DialogOptions, index)"
  >
    <component :is="options.contentRenderer" v-if="options.contentRenderer" />
    <template v-if="!options.showFooter" #footer>
      <component :is="options.footerRenderer" v-if="options.footerRenderer" />
    </template>
  </a-modal>
</template>

<style>
.full-modal {
  .ant-modal {
    max-width: 100%;
    top: 0;
    padding-bottom: 0;
    margin: 0;
  }
  .ant-modal-content {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: calc(100vh);
    border-radius: 0;
  }
  .ant-modal-body {
    flex: 1;
  }
}
</style>
